<template>
  <RouterView />
</template>

<script setup lang="ts">
  import { RouterView } from 'vue-router'
  import { onMounted, onUnmounted } from 'vue'
  import { OverlayScrollbars } from 'overlayscrollbars'
  import { useThemeStore } from '@/stores/useThemeStore'
  import { useLocaleStore } from '@/stores/useLocaleStore'
  import { LOCALES } from '@/locales'
  import { usePrimeVue } from 'primevue/config'
  const primevue = usePrimeVue()

  onMounted(() => {
    const themeStore = useThemeStore()
    const localeStore = useLocaleStore()

    const primaryColor = themeStore.CurrentTheme.primitive.emerald[500]
    window.addEventListener('localeChange', handleLocaleChange)

    /** 初始化语言配置 */
    localeStore.setLocale(localeStore.currentLocale)
    // 直接使用 OverlayScrollbars 初始化
    OverlayScrollbars(document.body, {
      scrollbars: {
        theme: null,
        clickScroll: true,
        dragScroll: true,
        visibility: 'auto',
        autoHide: 'scroll',
        autoHideDelay: 800,
        autoHideSuspend: false,
        pointers: ['mouse', 'touch', 'pen'],
      },
      overflow: {
        x: 'hidden',
        y: 'scroll',
      },
    })
  })

  onUnmounted(() => {
    window.removeEventListener('localeChange', handleLocaleChange)
  })

  const handleLocaleChange = (event: any) => {
    const lang = event.detail
    // @ts-ignore
    primevue.config.locale = LOCALES[lang]
  }
</script>

<style scoped></style>
